import React, { useState, useMemo } from 'react';
import { Transfer } from 'antd';
import { VariableSizeList as List } from 'react-window';

const VirtualListTransfer = ({ dataSource, ...props }) => {
  // 设置每项高度
  const itemSize = 32; // 根据你的实际项目调整

  // 虚拟列表组件
  const VirtualList = ({ filteredItems, onItemSelect, selectedKeys }) => {
    const itemData = useMemo(() => filteredItems, [filteredItems]);

    return (
      <List
        height={300} // 列表高度
        itemCount={filteredItems.length}
        itemSize={() => itemSize}
        width="100%"
        itemData={itemData}
      >
        {({ index, style }) => {
          const item = itemData[index];
          const selected = selectedKeys.includes(item.key);

          return (
            <div
              style={{
                ...style,
                cursor: 'pointer',
                padding: '6px 12px',
                backgroundColor: selected ? '#e6f7ff' : 'transparent',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
              }}
              onClick={() => onItemSelect(item.key, !selected)}
            >
              {props.render ? props.render(item) : item.name}
            </div>
          );
        }}
      </List>
    );
  };

  // Transfer 的 render 函数
  const renderTransferList = listProps => {
    const { filteredItems, onItemSelect, selectedKeys } = listProps;

    return (
      <VirtualList
        filteredItems={filteredItems}
        onItemSelect={onItemSelect}
        selectedKeys={selectedKeys}
      />
    );
  };

  return <Transfer dataSource={dataSource} render={renderTransferList} {...props} />;
};

export default VirtualListTransfer;
